<script lang="ts" setup>
import { computed } from 'vue'
import { tableDataStoreHook } from '@store/dataStore'
import { historyDataStoreHook } from '@store/historyStore'
import { ElMessageBox, ElMessage } from 'element-plus'

const tableDataStore = tableDataStoreHook()
const historyDataStore = historyDataStoreHook()
const clear = () => {
  ElMessageBox.confirm('确定要清空当前表格吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    draggable: true,
    type: 'warning'
  }).then(() => {
    tableDataStore.clear()
  })
}
const deleteRows = () => {
  ElMessageBox.confirm('确定要删除当前行吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    draggable: true,
    type: 'warning'
  }).then(() => {
    tableDataStore.deleteRows()
  })
}
const saves = () => {
  tableDataStore.saves()
}
const edits = () => {
  if (historyActive.value < 0) {
    ElMessage({
      type: 'error',
      message: '请选择要编辑的'
    })
  }
  tableDataStore.edits()
}
const historyActive = computed(() => historyDataStore.historyActive)
</script>

<template>
  <div class="function">
    <div class="title">功能</div>
    <div class="function-item">
      <div class="function-button">
        <el-button type="primary" size="default" @click="clear">清空</el-button>
      </div>
      <div class="function-button function-button-pdt">
        <el-button type="danger" size="default" @click="deleteRows">删除</el-button>
      </div>
      <div class="function-button function-button-pdt">
        <el-button v-if="historyActive < 0" type="primary" size="default" @click="saves"
          >保存</el-button
        >
        <el-button v-else type="primary" size="default" @click="edits">修改</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.function {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .function-item {
    .function-button {
      width: 33.33%;
    }
    .function-button-pdt {
      margin-top: 50px;
    }
  }
}
</style>
